<template>
  <div class="box">
    <p class="title">前台用户详情</p>
    <el-table :data="list" border style="width:100%; border-top:2px solid #ebeef5">
      <el-table-column prop="key" label="标题" width="180"></el-table-column>
      <el-table-column prop="value" label="内容">
        <template slot-scope="props">
          <div class="img-box" v-if="props.row.key === '用户头像'" :style="'background-image:url(' + props.row.value + ')'"></div>
          <span v-else>{{props.row.value}}</span>
        </template>
      </el-table-column>
    </el-table>
    <p style="margin-top:20px; text-align:center">
      <router-link class="back-btn" to="/member/list"><el-button>返回</el-button></router-link>
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      detailKey: {
        "openID": "openID",
        "photo": "用户头像",
        "card": "身份证号",
        "trueName": "会员真实姓名",
        "address": "地址",
        "agentName": "代理商名称",
        "parentName": "上级用户名称",
      }
    }
  },
  created() {
    //获取详情操作
    let _this = this;
    const id = this.$route.query.id;
    this.$ajax({
      url:'user/getinfo',
      data: {
        app:{
          userID: id
        }
      },
      perfect(con) {
        for (let key in con) {
          if (typeof con[key] === "object" && con[key]) {
            for (let name in con[key]) {
              let obj = {};
              obj.key = _this.detailKey[name];
              obj.value = con[key][name];
              _this.list.push(obj);
            }
          } else {
            let obj = {};
            obj.key = _this.detailKey[key];
            obj.value = con[key];
            _this.list.push(obj);
          }
        }
      }
    });
  }
};
</script>

<style scoped>
.title {
  padding: 20px 0;
  font-size: 20px;
  text-align: center;
}
.back-btn {
  text-align: center;
}
.img-box {
  width: 100px;
  height: 100px;
  background-position: center;
  background-size: cover;
}
</style>
